<template>
    <div class="container">
        <t-chat :data="chat_msgs" class="chat">
            <!-- 操作按钮 -->
            <template #actions="{ item, index }">
                <t-chat-action :content="item.content" :operation-btn="['good', 'bad', 'replay', 'copy', 'delete']"
                    @operation="handleOperation" />
            </template>

            <!-- 底部输入框 -->
            <template #footer>
                <t-chat-sender v-model="query" :textarea-props="{ placeholder: '请输入消息...' }" :loading="loading"
                    @send="inputEnter" @file-select="fileSelect" @stop="onStop">
                    <template #suffix="{ renderPresets }">
                        <component :is="renderPresets([])" />
                    </template>
                </t-chat-sender>
            </template>
        </t-chat>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 输入与状态
const query = ref('');
const loading = ref(false);

// 聊天消息列表
const chat_msgs = ref([
    {
        avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
        content: '它叫 McMurdo Station ATM，是美国富国银行安装在南极洲最大科学中心麦克默多站的一台自动提款机。',
        role: 'assistant',
    },
    {
        avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
        content: '南极的自动提款机叫什么名字？',
        role: 'user',
    },
    {
        avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
        content: 'McMurdo Station ATM',
        role: 'assistant',
    },
    {
        avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
        content: '它是McMurdo Station ATM吗？',
        role: 'user',
    },
]);

// 模拟 AI 流式回复（打字机效果）
const inputEnter = async () => {
    if (loading.value) return;
    if (!query.value.trim()) return;

    const userQuery = query.value.trim();
    query.value = '';
    loading.value = true;

    // 添加用户消息
    chat_msgs.value.unshift({
        avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
        content: userQuery,
        role: 'user',
    });

    // 创建 AI 消息对象（初始内容为空）
    const aiMsg = {
        avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
        content: '',
        role: 'assistant',
    };

    // 添加到消息列表
    chat_msgs.value.unshift(aiMsg);

    // 模拟流式响应：逐字添加
    const responseText = `这是对 "${userQuery}" 的回复。AI 正在逐字输出内容，模拟流式响应效果。`;
    for (let i = 0; i < responseText.length; i++) {
        await new Promise((resolve) => setTimeout(resolve, 50)); // 每50ms输出一个字符
        aiMsg.content += responseText[i];

        // 强制触发 Vue 更新（因为 aiMsg 是普通对象，插入到 ref 数组中）
        // 由于 chat_msgs 是 ref，修改数组内对象属性不会自动触发更新
        // 所以需要“通知” Vue 数据变化（简单方式：替换整个数组的引用）
        chat_msgs.value = [...chat_msgs.value];
    }

    loading.value = false;
};

// 其他事件处理
const fileSelect = (file: File) => {
    console.log('文件上传:', file);
};

const onStop = () => {
    loading.value = false;
    console.log('停止发送');
};

const handleOperation = (type: string, options: any) => {
    console.log('操作:', type, options);
};
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.chat {
    background-color: #f9fafa;
    padding: 10px;
    border-radius: 8px;
    height: 80vh;
    width: 90%;
    max-width: 800px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
</style>